<template>
  <div class="">
  <el-dialog
  :title="ids!=='' ? '修改' : '新增'"
  :visible="dialogVisible"
  width="70%"
  @close="handleClose"
  v-loading="loading">
  <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="80px">
  <el-form-item label="商户名" prop="username">
    <el-input v-model="ruleForm.username"></el-input>
  </el-form-item>
  <el-form-item label="手机号" prop="phone">
    <el-input v-model="ruleForm.phone"></el-input>
  </el-form-item>
  <el-form-item label="邮箱" prop="mailbox">
    <el-input v-model="ruleForm.mailbox"></el-input>
  </el-form-item>
  <el-form-item label="商品名称" prop="shopName">
    <el-input v-model="ruleForm.shopName"></el-input>
  </el-form-item>
  <el-form-item label="商品描述">
    <wangeditor  v-model="ruleForm.textHtml" :rows="2" ref="editor"></wangeditor>
  </el-form-item>
  </el-form>
  <el-button @click="handleClose">取 消</el-button>
  <el-button type="primary" @click="dialogVisibleadd">确 定</el-button>
  </el-dialog>
  </div>
</template>

<script>
import { shopUpdate, shopSave } from '@/api/shop'
import wangeditor from '@/components/wangeditor.vue'
export default {
  name:'',
  props: {
    ids:{
      default:''
    },
    shopuser:{
      default: () => {}
    },
    dialogVisible:{
      default:false
    }
  },
   
  components: {
    wangeditor
  },
   
  data () {
    var checkAgePhone = (rule, value, callback) => {
      const reg =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
      if (reg.test(value)) {
        return callback()
      }
      callback(new Error('请输入合法的电话号码'))
    }
    var checkAgeMailbox = (rule, value, callback) => {
      const reg =
        /^([a-zA-Z0-9._-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/
      if (reg.test(value)) {
        return callback()
      }
      callback(new Error('请输入合法的电话号码'))
    }
   return {
     loading:false,
     ruleForm:{
       id:'',
       username:'',
       phone:'',
       mailbox:'',
       shopName:'',
       textHtml:'',
     },
     rules: {
        username: [
          { required: true, message: "请输入商户名", trigger: "blur" },
          { min: 3, max: 11, message: "长度在 3 到 10 个字符", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { validator: checkAgePhone, trigger: 'blur' },
        ],
        mailbox: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          { validator: checkAgeMailbox, trigger: 'blur' },
        ],
        shopName: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
        ],
      },
   }
  },
  
  computed: {},
  
  watch: {
    shopuser(val){
      this.ruleForm = val
    }
  },
  created () {
  },
  
  methods: {
    // 新增/修改提交
    async dialogVisibleadd(){
      if (this.ids === '') {
       const { data } = await shopUpdate(this.ruleForm)
       if (data.status == '200'){
          this.$emit("refreshPage")
          this.$message.success(data.message)
        }
      }else{
        const id = this.ids
        this.ruleForm =  {...this.ruleForm, id}
       const { data } = await shopSave(this.ruleForm)
       if (data.status == '200'){
          this.$emit("refreshPage")
          this.$message.success(data.message)
        }
      }
    },
    // 关闭弹窗
    handleClose(){
      this.$refs.editor.clearText()
      this.ruleForm = {
       username:'',
       phone:'',
       mailbox:'',
       shopName:'',
       textHtml:'',
     },
      this.$emit("update:dialogVisible",false)
    }
  },
  
  mounted () {}
}
</script> 

<style scoped lang="less">

</style>